@charset "utf-8";
/* 网站首页banner样式区域 */
.banner{
    position: relative;
    width: 100%;
    height: 105vh; 
}
.banner video{
    position: absolute;
    left:0%;
    object-fit: fill;
    display: block;
    z-index: -10;
    top: 0;          
    width: 100%;
    height: 100%;
}
.banner .banner-section{
    width: 100%;
    height: 100%;
}
.banner .banner-section .banner-center{
    color: #ffffff;
    
    font-style: italic;
    
    position: absolute;
    letter-spacing: 15px;
    left: 30%;
    top: 40%;
    font-size: 60px;
}
/* 中间文本区域样式区域 */
.banner .banner-section .banner-center p,
.banner .banner-section .banner-center ul{
    display: inline-block;
}
.banner .banner-section .banner-center ul{
    color: #ffffff;
    margin-left:-30px;
    position: relative;
    top: 22px;
    font-style: italic;
    overflow: hidden;
    width: 155px;
    height:80px;
     
}
.banner .banner-section .banner-center ul div{
    position: relative;
    top:0;
    left: 0;
    animation-name: text;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;

}
@keyframes text{
    0%{
        top:0;
    }
    23%{
        top:0;
        
    }
    25%{
        top:-90px;
    }
    48%{
        top:-90px;
    }
    50%{
        top:-180px;
    }
    73%{
        top:-180px;
    }
    75%{
        top: -270px;
    }
    100%{
        top:-270px;
    }
}
.banner .banner-section .banner-center li{}
/* 下面图标区域样式区域 */
.banner .banner-bottom{
    position: absolute;
    width: 30px;
    height:57px;
    bottom:20px;
    left: 49%;
    z-index: 5;
}
.banner .banner-bottom .banner-bot{
    
    border-radius: 2px;
    width: 2px;
    height: 32px;
    margin: 0 auto;
    overflow: hidden;
}
.banner .banner-bottom .banner-bot div{
    width: 2px;
    height:32px;
    background: #ffffff;
    position: relative;
    margin-bottom:3px;
    animation-name: bot;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes bot{
    0%{
        top: -32px;
    }
    3%{
        top: -32px;
    }
    48%{
        top: 0;
    }
    52%{
        top: 0;
    }
    97%{
        top:32px;
    }
    100%{
        top:32px;
    }
}
.banner .banner-bottom span{
    letter-spacing:2px;
    font-size: 13px;
    color: #ffffff;
}
/* 网站文字简介区域样式 */
.briefIntroductionTEXT{
    text-align: center;
    color: #5f6464;
    font-size: 24px;
    width: 100%;
    text-align: center;
    font-style: initial;
    letter-spacing: 1px;
    overflow: hidden;
    margin: 150px 0 100px 0;
    line-height: 54px;
}
.briefIntroductionTEXT p{
    font-style: oblique;
    transform: skew(10deg);
    font-family: '温软雅黑';
}

/* 网站图片简介区域样式 */
.briefIntroductionIMG{
    padding: 0 5%;
    width: 100%;
}
.briefIntroductionIMG ul{
    display: flex;
    justify-content: space-between;
}
.briefIntroductionIMG ul li{
    display: inline-block;
    position: relative;
    left: 0;
    width: 400px;
    height:250px;
    
    overflow: hidden;
    top:0;
}
.briefIntroductionIMG ul li a{}
.briefIntroductionIMG ul li:hover img{
    transform: scale(1.2);
}
.briefIntroductionIMG ul li a img{
    transition: transform 1s;
    width: 100%;
    height: 100%;
}
.briefIntroductionIMG ul li:hover div{
    background: rgba(0, 82, 217, 0.7);
}
.briefIntroductionIMG ul li a div{
    text-align: center; 
    position: absolute;
    left:0;
    transform:background 1s;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,82, 217,0.0);
}
.briefIntroductionIMG ul li a div p{
    line-height: 240px;
    color: #ffffff;
    font-size: 30px;
}
.briefIntroductionIMG ul li a:after{
    content: '';
    display: block;
    height: 2px;
    width: 0px;
    position: absolute;
    left:35%;
    top: 56%;
    z-index: 3;
    background: #ffffff;
    transition: all 1s;
    opacity: 0;
}
.briefIntroductionIMG ul li:hover a:after{
    opacity: 1;
    width: 120px;
}
/*  网站切换卡部分样式 */
/* .switchCard{
    margin: 40px 0;
    position: relative;
    width: 98vw;
    height: 100vh;
    background: #1b1f25;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.switchCard ul{
    display: flex;
    flex-wrap: wrap;
    width:64%;
    height: 100vh;
    position: absolute;
    left:30%;
    top: -50px;
}
.switchCard a h3{
    line-height: 60px;
    color: #999999;
}
.switchCard a p{
    height: 60px;
    background: none;
    line-height: 10px;
    color: #999999;
    transition: all 0.3s;
    background-size: 0% 18%;
}
.switchCard a:hover p{
    
    background: url(../img/icon-rights.png) no-repeat;
    background-size: 4% 18%;
    background-position: 10px 40px;
}
.switchCard a:hover::before{
    margin-left: 20px;
    width: 5px;
}
.switchCard a:hover{
    padding-left: 30px;
}
.switchCard a:before{
    transition: all 1s;
    content: "";
    position: absolute;
    left: -25px;
    top: 40px;
    display: block;
    width: 0px;
    height: 70px;
    background: rgba(0, 82, 217, 0.7);
}
.switchCard a{
    transition: all 1s;
    margin-top: 50px;
    width: 100vw;
    position: relative;
    transform: scale(10deg);
    font-style: italic;
    margin-left: 5%;
    height: 30%;
}
.switchCard a:last-child ul{
    top: -73.3vh;
}
.switchCard .w100{
    width: 100%;
    height: 50%;
}
.switchCard a:nth-child(2) ul{
    top: -40vh;
}
.switchCard ul li img{
    height: 100%;
}

.switchCard ul li{
    width: 50%;
    height: 50%;
    position: relative;
}

.switchCard ul li div{
    width: 100%;
    padding:  0 8%;
    position: absolute;
    left: 10px;
    bottom: -18%;
    transition: all 1s;
}
.switchCard ul li div h3{
    color: #ffffff;
    font-weight: bold ;
    width: 100%;
    font-size: 20px;
    background-size: 3% 50%;
    transition: all 1s;
    background-position: 80% 50%;
}
.switchCard ul li div h4{
    font-size: 16px;
    line-height: 25px;
    color: #bebebe;
}
.switchCard ul li:hover div{
    bottom: 3%;
}
.switchCard ul li:hover div h3{
    background: url(../img/icon-rights.png) no-repeat;
    background-size: 13% 28%;
    background-position: 90% 50%;
} */

.switchCard{
    width: 35%;
    margin-bottom: 50px;
    background: #1b1f25;
    height: 800px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.switchCard a{

    left: 0;
    transition: left 0.5s;
    position: relative;
    color:#999999;
}

.switchCard a div{
    width: 0;
    left:-30px;
    transition: all 0.5s;
    position: absolute;
    height: 75px;   
    background: rgb(31, 31, 128);
}
.switchCard a img{
    width: 0px;
    height: 22px;
    transition: all 0.2s;
}


.switchCard a .simgimg{
    width: 70px;
}
.switchCard .sasa{
    color: #e2e2e2;
    left: 20px;
}

.switchCard .sdivdiv{
    width: 7px;
}


.switchCard ul{
    display: none;
    overflow: hidden;
    left: 100%;
    top: 0;
    width: 185.714%;
    background: red;
    display: flex;
    flex-wrap: wrap;
    display: none;
    position: absolute;
}
.switchCard ul:first-child{
    z-index: 3;
}
.switchCard ul li{
    float: left;
    height: 400px;
    position: relative;
    width: 50%;
    box-sizing: border-box;

}
.switchCard ul li img{
    width: 100%;
    height: 100%;
}
.switchCard ul li div{
    position: absolute;
    bottom: -100px;
    box-sizing: border-box;
    padding: 0 60px;
    left: 0;
    transition: all 0.5s;
}
.switchCard ul li div h3{
    color: #cacaca;
    font-weight: bold;
    font-size: 24px;
    line-height: 40px;
}
.switchCard ul li div h4{
    color: #999898;
    font-size: 16px;
    line-height: 25px;
}
.switchCard ul li:hover div{
    /* position: absolute; */
    left: 0;
    bottom:10px;
}
.switchCard ul li{}




/* 网站首页第一部分轮播图区域 */
.respbanner{
    overflow: hidden;
    width: 85%;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    
}
.respbanner-left{
    width: 55%;
    height:100%;
    position: relative;
}
.respbanner-left-banner{
    z-index: 3;
    width: 100%;
    height: 100%;
}
.respbanner-left-banner .aniuleft{
    left:62%;
    top: 70%;
    width: 100px;
    height: 50px;
}
.respbanner-left-banner .aniuright{
    left: 70%;
    top: 70%;    
    width: 100px;
    height: 50px;
}
.respbanner-left-banner .aniuleft,
.respbanner-left-banner .aniuright{
    transition: all 0.7s;
    opacity: 0;
    visibility: hidden;
}
.respbanner-left-banner:hover a{
    opacity: 1;
    visibility: visible;
}
.respbanner-left-banner h5{
    text-align: left;
    font-weight: bold;
    font-style: italic;
    font-size: 24px;
}
.respbanner-left-banner p{
    font-style: italic;
    text-align: left;
}
.respbanner-left>img{
    position: absolute;
    z-index: 50;
    right: 0;
    top: 0;
}
.respbanner-right{
    padding-left: 20px;
    width: 50%;
    height: 100%;
    display: flex;
    font-style: italic;
    transform: scale(20deg);
    justify-content: center;
    flex-direction: column;
}
 .respbanner .respbanner-right h3{
     line-height: 50px;
 }
 .respbanner .respbanner-right P{
     background: url(../img/icon_right.png) no-repeat;
     height: 100px;
     background-size: 9% 18%;
     background-position: 0 60%; 
 }
 /* 网站内容第二部分轮播图样式区域 */
.develop{
    margin: 50px 0;
    height: auto;
    position: relative;
}
.develop img{}
.develop .developtext{
    position: absolute;
    left: 5%;
    top: -15%;
    padding-left: 20px;
    width: 50%;
    height: 100%;
    display: flex;
    font-style: italic;
    transform: scale(20deg);
    justify-content: center;
    flex-direction: column;
}
.developtext{
    z-index: 2;
}
.developbanner{
    position: relative;
}
.developbanner #bniu{
    justify-content: flex-end;
    width: 83%;
}
.developbanner #bniu #bniu-item{
    width: 10px;
    opacity: 1;
    height: 10px;
    background-clip: content-box;
    border: 0;
    background: #ffffff;
}
.developbanner #bniu  .active{
    width: 20px !important;
    background: #0052d9 !important;
}
.develop .developtext h3{}
.develop .developtext p{
    background: url(../img/icon_right.png) no-repeat;
    height: 100px;
    background-size: 9% 18%;
    background-position: 0 60%; 
}
